import React from 'react'
import SearchBar from '../ui/SearchBar'
import Swiper from '../ui/MySwiper'
import NavGrid from '../ui/NavGrid'
import HotShow from '../ui/HotShow'
import HotStar from '../ui/HotStar'
import Recommended from '../ui/Recommended'
import { useSelector } from 'react-redux'

import { loadDataSaga } from '../actionCreator'

import Scroll from '@/components/scroll/Scroll'

export default function Home() {
  let list = useSelector(state => state.getIn(['home', 'list']))
  return (
    <Scroll 
      id="home-scroll"
      loadDataSaga={loadDataSaga}
      list={list}
    >
      <SearchBar></SearchBar>
      <Swiper></Swiper>
      <NavGrid></NavGrid>
      <HotShow></HotShow>
      <HotStar></HotStar>
      <Recommended></Recommended>
    </Scroll>
  )
}
